<template>
    <div class="vo-drag-view-mask">
        <div class="vo-drag-view--title">
            <slot name="title">
                <span class="title" v-if="property">{{property.model}}</span>
            </slot>
        </div>
        <div v-if="['tr', 'td', 'col', 'tabPane'].indexOf(property.type) === -1"
            v-show="isActive"
            class="vo-drag-view--options top-right"
            :class="{
                'is-type': property && property.type
            }">
            <!-- 拖动 -->
            <i title="拖动" class="el-icon-rank options-btn drag-bar"></i>
        </div>
        <div v-show="isActive" class="vo-drag-view--options bottom-right" :class="{
            'is-type': property && property.type
        }">
            <!-- 表格 -->
            <span class="options-btn" v-if="['table'].indexOf(property.type) !== -1">
                <i title="添加行" class="iconfont icon--charuhang" @click.stop.prevent="tableRowAdd"></i>
            </span>
            <span class="options-btn" v-if="['table'].indexOf(property.type) !== -1">
                <i title="添加列" class="iconfont icon--charulie" @click.stop.prevent="tableColumnAdd"></i>
            </span>
            <span class="options-btn" v-if="['td'].indexOf(property.type) !== -1">
                <el-dropdown trigger="click" @command="tdSetClick">
                    <i title="表格设置" class="iconfont icon-biaogeshezhi" @click.stop.prevent></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="push-left">左插入列</el-dropdown-item>
                        <el-dropdown-item command="push-right">右插入列</el-dropdown-item>
                        <el-dropdown-item command="push-top">上插入行</el-dropdown-item>
                        <el-dropdown-item command="push-bottom">下插入行</el-dropdown-item>
                        <el-dropdown-item divided command="merge-right" :disabled="mergeRightDisabled">向右合并</el-dropdown-item>
                        <el-dropdown-item command="merge-bottom" :disabled="mergeBottomDisabled">向下合并</el-dropdown-item>
                        <el-dropdown-item divided command="split-column" :disabled="splitColumnDisabled">拆分成列</el-dropdown-item>
                        <el-dropdown-item command="split-row" :disabled="splitRowDisabled">拆分成行</el-dropdown-item>
                        <el-dropdown-item divided command="delete-column" :disabled="deleteColumnDisabled">删除当前列</el-dropdown-item>
                        <el-dropdown-item command="delete-row" :disabled="deleteRowDisabled">删除当前行</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </span>
            <!-- 栅格 -->
            <span class="options-btn" v-if="['row', 'col'].indexOf(property.type) !== -1">
                <i title="添加" class="el-icon-plus" @click.stop.prevent="handleRowAdd"></i>
            </span>
            <!-- 复制 -->
            <span class="options-btn" v-if="property.widget">
                <i title="复制" class="el-icon-document-copy" @click.stop.prevent="handleCopy"></i>
            </span>
            <!-- 删除 -->
            <span class="options-btn" v-if="property.widget || ['table', 'row', 'col'].indexOf(property.type) !== -1">
                <i title="删除" class="el-icon-delete" @click.stop.prevent="handleDelete"></i>
            </span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'VoDragLayoutFormItemMask',
    props: {
        property: Object,
        selectProperty: Object,
        parent: Object,
        layout: Object
    },
    computed: {
        isActive() {
            const { selectProperty, property } = this
            if (selectProperty && property) {
                return selectProperty === property
            }
            return false
        },
        mergeRightDisabled() {
            const { selectProperty, parent } = this
            if (!selectProperty || selectProperty.type !== 'td') return true;
            if (!parent) return true;
            const realProperties = parent.properties.filter(e => e.attrs.colspan)
            const index = realProperties.findIndex(e => e === selectProperty)
            if (index < 0) return true;
            const len = realProperties.length
            if (index === len - 1) return true;
            const tdRowspan = selectProperty.attrs.rowspan;
            const nextTdRowspan = realProperties[index + 1].attrs.rowspan;
            return tdRowspan !== nextTdRowspan
        },
        mergeBottomDisabled() {
            const { selectProperty, parent, layout } = this
            if (!selectProperty || selectProperty.type !== 'td' || !layout) return true;
            if (!parent) return true;
            // 1.第一种情况：当前行的 index + 当前行的 rowspan >= 总行数的时候禁用
            // 当前行(parent)的index
            const trIndex = layout.properties.findIndex(e => e === parent)
            // 总行数
            const trLen = layout.properties.length
            // 当前行的rowspan
            const tdRowspan = selectProperty.attrs.rowspan;
            const tdCowspan = selectProperty.attrs.colspan;
            if ((trIndex + tdRowspan) >= trLen) return true;
            // 2.第二种情况：当前行 和 下一行(trIndex + rowspan)的 colspan 要相等
            const tdIndex = parent.properties.findIndex(e => e === selectProperty)
            // 下一行
            const nextTr = layout.properties[trIndex + 1]
            // 下一行 td
            const nextTd = nextTr.properties[tdIndex]
            if (!nextTd) return true;
            return tdCowspan !== nextTd.attrs.colspan
        },
        splitColumnDisabled() {
            const { selectProperty } = this
            return selectProperty && selectProperty.attrs && selectProperty.attrs.colspan < 2
        },
        splitRowDisabled() {
            const { selectProperty } = this
            return selectProperty && selectProperty.attrs && selectProperty.attrs.rowspan < 2
        },
        deleteColumnDisabled() {
            const { selectProperty, parent } = this
            if (parent.properties.length <= 1) return true;
            return selectProperty && selectProperty.attrs && selectProperty.attrs.colspan > 1
        },
        deleteRowDisabled() {
            const { selectProperty, layout } = this
            if (layout.properties.length <= 1) return true;
            return selectProperty && selectProperty.attrs && selectProperty.attrs.rowspan > 1
        }
    },
    methods: {
        // 删除
        handleDelete() {
            this.$emit('on-delete', this.property)
        },
        // 复制
        handleCopy() {
            this.$emit('on-copy', this.property)
        },
        // 栅格
        handleRowAdd() {
            this.$emit('on-row-add', this.property)
        },
        // 表格
        // 添加行
        tableRowAdd() {
            this.$emit('on-table-row-add', this.property)
        },
        // 添加列
        tableColumnAdd() {
            this.$emit('on-table-column-add', this.property)
        },
        // 表格设置
        tableColumnSet(e) {
            this.$emit('on-table-td-set', {
                property: this.property,
                key: e
            })
        },
        tdSetClick(e) {
            this.tableColumnSet(e)
        }
    }
}
</script>

<style lang="scss" scoped>
$color-blue: #0094ff;
$color-yellow: #E6A23C;

.vo-drag-view-mask{
    .vo-drag-view--title{
        position: absolute;
        top: 0;
        left: 10px;
        z-index: 100;
        &.is-type{
            background: $color-yellow;
        }
        .title{
            font-size: 12px;
            color: #67C23A;
        }
    }
    .vo-drag-view--options{
        background: $color-blue;
        color: #ffffff;
        position: absolute;
        z-index: 100;
        &.is-type{
            background: $color-yellow;
        }
        &.top-right{
            top: 0;
            right: 0;
            border-bottom-left-radius: 4px;
        }
        &.top-left{
            top: 0;
            left: 0;
            border-bottom-right-radius: 4px;
        }
        &.bottom-right{
            bottom: 0;
            right: 0;
            border-top-left-radius: 4px;
        }
        &.bottom-left{
            bottom: 0;
            left: 0;
            border-top-right-radius: 4px;
        }
        .options-btn{
            display: inline-block;
            font-size: 16px;
            cursor: pointer;
            margin-top: 4px;
            margin-bottom: 4px;
            margin-left: 4px;
            & + .options-btn{
                margin-left: 10px;
            }
            &:last-child{
                margin-right: 4px;
            }
            &:hover{
                color: #FFFFFF;
            }
        }
        .drag-bar{
            cursor: grab;
        }
        i{
            color: #ffffff;
        }
    }
}
</style>
